<template>
  <view class="tab-control">
    <view
      class="item"
      v-for="(item, index) in msg"
      :key="item.title"
      @click="btnClick(index)"
      :class="{ 'active-color': index === currentIndex }"
    >
      {{ item.title }} {{ item.num }}
    </view>
  </view>
</template>

<script>
export default {
  name: 'TabControl',
  data() {
    return {
      msg: [{ title: '作品', num: 8 }, { title: '动态', num: 8 }, { title: '喜欢', num: 8 }],
      currentIndex: 0
    }
  },
  methods: {
    btnClick(index) {
      this.currentIndex = index
      this.$emit('btnClick',index)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-control {
  height: 100rpx;
  display: flex;
  color: gray;
  .item {
    flex: 1;
    text-align: center;
    line-height: 100rpx;
  }
}
.active-color {
  color: #eee;
  border-bottom: 6rpx solid #F7C106;
}
</style>
